<template>
    <div class="title-bar flex">
        <div class="title mr-auto">
            <slot></slot>
        </div>
        <slot name="actions">
        </slot>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({

})

</script>

<style scoped>
.title-bar {
    position: relative;
    background: linear-gradient(90deg, rgba(44, 88, 120, 0.4) 0%, rgba(44, 88, 120, 4e-05) 70%, rgba(44, 88, 120, 4e-05) 100%);
    height: 40px;
    box-sizing: border-box;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-image-source: linear-gradient(90deg, rgba(102, 175, 249, 0.5) 0%, rgba(102, 175, 249, 0) 100.22%);
    border-image-slice: 1 0 1 0;
}

.title-bar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    bottom: -1px;
    width: 7px;
    background: #66AFF9;
}

.title {
    line-height: 40px;
    padding-left: 20px;
    font-weight: 400;
    font-size: 17px;
    color: #E0F7FF;
    text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
}
</style>